<template>
  <van-form class="patrolInspect-form-card" @submit="onSubmit" :readonly="loading" label-width="130rpx" colon>
    <van-cell-group inset>
      <van-field
        name="uploader" required label="巡检照片"
        :rules="[{ required: true, message: '请上传隐患照片' }]"
      >
        <template #input>
          <upload-file accept="image/*" v-model="form.checkPicId" ></upload-file>
        </template>
      </van-field>
      <van-field
        name="uploader" label="巡检视频"
      >
        <template #input>
          <upload-file accept="video/*" v-model="form.patrolVideoId"></upload-file>
        </template>
      </van-field>
      <van-field
        v-model="form.patrolDesc"
        rows="4" autosize required type="textarea"
        label="巡检描述"
        show-word-limit maxlength="200"
        placeholder="请输入巡检描述"
        :rules="[{ required: true, message: '请输入巡检描述' }]"
      />
    </van-cell-group>
    <view class="patrolInspect-form-card-footer">
      <!-- <van-button @click="onSaveForm" class="patrolInspect-form-card-footer-button" size="small">暂存巡查点</van-button> -->
      <van-button 
        class="patrolInspect-form-card-footer-submit" type="primary" size="small" native-type="submit"
        :loading="loading" loading-text="提交中..."
      >提交巡查点</van-button>
    </view>
  </van-form>
</template>

<script setup>
import { ref } from 'vue';
const emit = defineEmits(['confirm']);
const props = defineProps({
  detail: Object
});
const form = ref({
  checkPicId: [],
  patrolVideoId: [],
  patrolDesc: ''
});
const loading = ref(false);
const onSubmit = () => {
  loading.value = true;
  emit('confirm', form.value);
};
const initLoading = () => {
  loading.value = false;
}

defineExpose({
  initLoading,
})
</script>

<style lang="scss" scoped>
@import '@/assets/patrolInspect.scss';
</style>